<template>
  <div class="venus-list-page">
    <!--自定义资产模板界面-->
    <div class="page-search">
      <el-row type="flex" class="search-list">
        <el-row type="flex" class="list-items">
          <div class="venus-input-box">
            <label>行内资产编码</label>
            <el-input
              v-model="table.main_table.ftool_code"
              class="venus-input-middle"
              placeholder="请输入行内资产编码"
            />
          </div>
          <div class="venus-input-box">
            <label>资管计划名称</label>
            <el-input
              v-model="table.main_table.ftool_name"
              class="venus-input-middle"
              placeholder="请输入资管计划名称"
            />
          </div>
        </el-row>
        <div class="venus-btn-box">
          <el-button type="primary" @click="search">查询</el-button>
          <el-button type="primary" @click="reset">重置</el-button>
          <el-button type="primary" @click="toAdd">新增</el-button>
        </div>
      </el-row>
    </div>
    <!--    查询列表返显-->
    <div class="page-list">
      <el-row type="flex" justify="space-between" class="page-list-head">
        <div class="title">查询结果</div>
      </el-row>
      <table-pagination
        :dict-data="dict"
        :table-data="table.main_table.tableData"
        :table-header-config="table.tableHeaderConfig"
        highlight-current-row
        :total="table.main_table.total"
        :page-size="table.main_table.limit"
        :now-page="table.main_table.nowPage"
        @current-change="currentChange"
        @table-current-change="showInfo"
        :operation-config="table.operationConfig"
      />
    </div>
    <div class="page-list">
      <el-row type="flex" justify="space-between" class="page-list-head">
        <div class="title">利率调整信息</div>
      </el-row>
      <table-pagination
        :dict-data="dict"
        :table-data="table.yield_table.tableData"
        :table-header-config="table.yield_tableHeaderConfig"
        highlight-current-row
        :total="table.yield_table.total"
        :page-size="table.yield_table.limit"
        :now-page="table.yield_table.nowPage"
        @current-change="yieldCurrentChange"
        :operation-config="table.yield_operationConfig"
      />
    </div>
    <div class="page-list">
      <el-row type="flex" justify="space-between" class="page-list-head">
        <div class="title">付息频率记录</div>
      </el-row>
      <table-pagination
        :dict-data="dict"
        :table-data="table.payfrep_table.tableData"
        :table-header-config="table.pay_frep_tableHeaderConfig"
        highlight-current-row
        :total="table.payfrep_table.total"
        :page-size="table.payfrep_table.limit"
        :now-page="table.payfrep_table.nowPage"
        @current-change="payFrepCurrentChange"
      />
    </div>
    <!--收益率调整-->
    <el-dialog :title="dialog.yield.title" :visible.sync="dialog.yield.formVisible" v-dialogDrag>
      <!-- ref=dlgForm用于验证表单 -->
      <el-form ref="dlgFormYield" :model="dialog.yieldform" size="mini">
        <el-row>
          <!--资产代码-->
          <el-col :xs="24" :sm="12" :md="12">
            <el-form-item
              label="资产代码"
              :label-width="dialog.formLabelWidth"
              prop="ftool_name"
              :rules="dialog.formRules.ftool_name"
            >
              <el-input v-model="dialog.yieldform.ftool_name" disabled/>
            </el-form-item>
          </el-col>
          <!--生效日期-->
          <el-col :xs="24" :sm="12" :md="12">
            <el-form-item
              label="生效日期"
              :label-width="dialog.formLabelWidth"
              prop="settle_date"
              :rules="dialog.formRules.settle_date"
            >
              <el-date-picker
                v-model="dialog.yieldform.settle_date"
                type="date"
                class="venus-input-middle venus-input-date"
                placeholder="请选择生效日期"
                value-format="yyyyMMdd"
              />
            </el-form-item>
          </el-col>
          <!--收益率(%)-->
          <el-col :xs="24" :sm="12" :md="12">
            <el-form-item
              label="收益率(%)"
              :label-width="dialog.formLabelWidth"
              prop="yield"
              :rules="dialog.formRules.yield"
            >
              <el-input v-model="dialog.yieldform.yield" />
            </el-form-item>
          </el-col>
          <!--备注-->
          <el-col :xs="24" :sm="12" :md="12">
            <el-form-item
              label="备注"
              :label-width="dialog.formLabelWidth"
              prop="note"
              :rules="dialog.formRules.note"
            >
              <el-input v-model="dialog.yieldform.note" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button type="success" @click="">提 交</el-button>
        <el-button type="info" plain @click="dialog.yield.formVisible=false">取 消</el-button>
      </div>
    </el-dialog>

    <!--付息频率调整-->
    <el-dialog :title="dialog.payfrep.title" :visible.sync="dialog.payfrep.formVisible" v-dialogDrag>
      <!-- ref=dlgForm用于验证表单 -->
      <el-form ref="dlgFormFrep" :model="dialog.payfrepform" size="mini">
        <el-row>
          <!--资产代码-->
          <el-col :xs="24" :sm="12" :md="12">
            <el-form-item
              label="资产代码"
              :label-width="dialog.formLabelWidth"
              prop="ftool_name"
              :rules="dialog.formRules.ftool_name"
            >
              <el-input v-model="dialog.payfrepform.ftool_name" disabled/>
            </el-form-item>
          </el-col>
          <!--原付息频率-->
          <el-col :xs="24" :sm="12" :md="12">
            <el-form-item
              label="原付息频率"
              :label-width="dialog.formLabelWidth"
              prop="primary_pay_freq"
              :rules="dialog.formRules.primary_pay_freq"
            >
              <el-select
                v-model="dialog.payfrepform.primary_pay_freq"
                placeholder="请选择原付息频率"
                filterable
                clearable
                disabled
              >
                <el-option
                  v-for="(text,key) in dict.pay_freq"
                  :key="key"
                  :label="text"
                  :value="key"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <!--新付息频率-->
          <el-col :xs="24" :sm="12" :md="12">
            <el-form-item
              label="新付息频率"
              :label-width="dialog.formLabelWidth"
              prop="pay_freq"
              :rules="dialog.formRules.pay_freq"
            >
              <el-select
                v-model="dialog.payfrepform.pay_freq"
                placeholder="请选择新付息频率"
                filterable
                clearable
              >
                <el-option
                  v-for="(text,key) in dict.pay_freq"
                  :key="key"
                  :label="text"
                  :value="key"
                />
              </el-select>
            </el-form-item>
          </el-col>

          <!--调整日期-->
          <el-col :xs="24" :sm="12" :md="12">
            <el-form-item
              label="调整日期"
              :label-width="dialog.formLabelWidth"
              prop="settle_date"
              :rules="dialog.formRules.settle_date"
            >
              <el-date-picker
                v-model="dialog.payfrepform.settle_date"
                type="date"
                class="venus-input-middle venus-input-date"
                placeholder="请选择调整日期"
                value-format="yyyyMMdd"
              />
            </el-form-item>
          </el-col>
          <!--下次付息日-->
          <el-col :xs="24" :sm="12" :md="12">
            <el-form-item
              label="下次付息日"
              :label-width="dialog.formLabelWidth"
              prop="next_pay_date"
              :rules="dialog.formRules.next_pay_date"
            >
              <el-date-picker
                v-model="dialog.payfrepform.next_pay_date"
                type="date"
                class="venus-input-middle venus-input-date"
                placeholder="请选择下次付息日"
                value-format="yyyyMMdd"
              />
            </el-form-item>
          </el-col>
          <!--备注-->
          <el-col :xs="24" :sm="12" :md="12">
            <el-form-item
              label="备注"
              :label-width="dialog.formLabelWidth"
              prop="payfrepform"
            >
              <el-input v-model="dialog.payfrepform.note" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button type="success" @click="">提 交</el-button>
        <el-button type="info" plain @click="dialog.yield.formVisible=false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import * as kk from "../../../../../../utils/k-utils";

  export default {
    name: 'M8asset0204',
    data() { // 数据定义
      return {
        dict: {
          ad_calculation: {}, //核算方式
          pay_freq: {}, //付息频率
        },
        table: {
          tableHeaderConfig: [ // 表头配置
            { prop: 'ftool_code', label: '行内资产编码' },
            { prop: 'ftool_name', label: '资管计划名称' },
            { prop: 'ad_calculation', label: '核算方式' },
            { prop: 'begindate', label: '起息日' },
            { prop: 'enddate', label: '到期日' },
            { prop: 'yield', label: '收益率（%）' },
            { prop: 'pay_freq', label: '付息频率' },
            { prop: 'first_pay', label: '首次付息日' },
            { prop: 'basedays', label: '计息基数' }
          ],
          yield_tableHeaderConfig: [ // 表头配置
            { prop: 'ftool_code', label: '资产名称' },
            { prop: 'settle_date', label: '生效日期' },
            { prop: 'yield', label: '收益率(%)' }
          ],
          pay_frep_tableHeaderConfig: [ // 表头配置
            { prop: 'ftool_name', label: '资产名称' },
            { prop: 'primary_pay_freq', label: '原付息频率' },
            { prop: 'pay_freq', label: '新付息频率' },
            { prop: 'settle_date', label: '调整日期' },
            { prop: 'next_pay_date', label: '下次付息日' }
          ],
          operationConfig: { // 表格操作配置
            fixed: 'right',
            width: 200,
            operationButton: [
              // 每一个操作。value:操作文字；func:回调函数
              { value: '修改', func: this.myModify },
              { value: '收益率调整', func: this.myChangeYield },
              { value: '付息频率调整', func: this.myChangeFrep },
              { value: '复制', func: this.myCopy },
              { value: '详情', func: this.myinfo },
              { value: '删除', func: this.myDelete }
            ]
          },
          yield_operationConfig: { // 表格操作配置
            fixed: 'right',
            width: 200,
            operationButton: [
              // 每一个操作。value:操作文字；func:回调函数
              { value: '修改', func: this.myYieldModify },
              { value: '确认', func: this.myCommit },
              { value: '删除', func: this.myDelete }
            ]
          },
          main_table: { //表格数据
            total: 0,
            nowPage: 1,
            limit: 5,
            tableData: [], // 表格数据
            exeid: 'M8asset0204EQ01',//exeid
            ftool_code: '',//行内资产编码
            ftool_name: '',//资管计划名称
            t8_assdept_inf_id: '',
          },
          yield_table: { //表格数据
            total: 0,
            nowPage: 1,
            limit: 5,
            tableData: [], // 表格数据
            exeid: 'M82003_2EQ101',//exeid
          },
          payfrep_table: { //表格数据
            total: 0,
            nowPage: 1,
            limit: 5,
            tableData: [], // 表格数据
            exeid: 'M82003_2EQ201',//exeid
          }
        },
        dialog: {
          formLabelWidth: '100px',
          formRules: {
            ftool_name: [
              {required: true, message: '请输入资产名称', trigger: 'blur'},
            ],
            settle_date: [
              {required: true, message: '请选择生效日期', trigger: 'change'},
            ],
            formLabelWidth: [
              {required: true, message: '请输入收益率(%)', trigger: 'blur'},
            ],
            primary_pay_freq: [
              {required: true, message: '请选择原付息频率', trigger: 'change'},
            ],
            pay_freq: [
              {required: true, message: '请选择新付息频率', trigger: 'change'},
            ],
            settle_date: [
              {required: true, message: '请选择调整日期', trigger: 'change'},
            ],
            next_pay_date: [
              {required: true, message: '请选择下次付息日', trigger: 'change'},
            ],
          },
          yieldform: {
            ftool_name: '', // 资产名称
            settle_date: '', // 资产名称
            yield: '', // 收益率(%)
            note: '', // 备注
          },
          payfrepform: {
            ftool_name: '', // 资产名称
            primary_pay_freq: '', // 原付息频率
            pay_freq: '', // 新付息频率
            settle_date: '', // 调整日期
            next_pay_date: '', // 下次付息日
            note: '', // 备注
          },
          yield: {
            title: '',
            formVisible: false
          },
          payfrep: {
            title: '付息频率调整',
            formVisible: false
          }
        }
      }
    },
    mounted() {
      // 初始化调用
      this.init()
    },
    methods: {
      // 页面初始化
      init: function() {
        kk.k_load_dict(this, 'ad_calculation', 't8_calculation_method');
        kk.k_load_dict(this, 'pay_freq', 't8_pay_freq_guizhou');
        this.table.main_table.nowPage = 1;
        kk.k_load_table(this,'main_table','custom');
      },
      // 事件触发
      search() { // 查询函数
        this.table.main_table.nowPage = 1;
        kk.k_load_table(this,'main_table','custom');
      },
      reset() {
        this.table.main_table.ftool_code = ''
        this.table.main_table.ftool_name = ''
      },
      toAdd() {
        this.$router.push('M8asset0204exAdd')
      },
      // ======================表格======================
      myModify(item, index) {
        this.$router.push('M8asset0204exAdd')
      },
      myYieldModify(item, index) {
        this.dialog.yield.title='修改资产分段收益率'
        this.copyObj(item, this.dialog.yieldform)
        this.dialog.yield.formVisible = true      },
      myChangeYield(item, index) {
        // 赋值
        this.dialog.yield.title='收益率调整'
        this.copyObj(item, this.dialog.yieldform)
        this.dialog.yield.formVisible = true
      },
      myChangeFrep(item, index) {
        // 赋值
        this.copyObj(item, this.dialog.payfrepform)
        this.dialog.payfrep.formVisible = true
      },
      myDelete(item, index) {
        console.log(item, index, '-----删除对象')
      },
      myCopy(item, index) {
        this.$router.push('M8asset0204exAdd')
      },
      myinfo(item, index) {
        this.$router.push('M8asset0204exAdd')
      },
      myDelete(item, index) {
        console.log(item, index, '-----删除')
      },
      myCommit(item, index) {
        console.log(item, index, '-----确认')
      },
      showInfo(params){//表单级联
        this.table.yield_table.nowPage = 1 // 初始第一页
        this.table.payfrep_table.nowPage = 1 // 初始第一页
        this.table.yield_table.t8_assdept_inf_id = params.t8_assdept_inf_id
        this.table.payfrep_table.t8_assdept_inf_id = params.t8_assdept_inf_id
        kk.k_load_table(this, 'yield_table', 'custom')
        kk.k_load_table(this, 'payfrep_table', 'custom')
      },
      currentChange(index){//分页
        this.table.main_table.nowPage = index;
        kk.k_load_table(this,'main_table','custom');
      },
      yieldCurrentChange(index){//分页
        this.table.main_table.nowPage = index;
        kk.k_load_table(this,'yield_table','custom');
      },
      payFrepCurrentChange(index){//分页
        this.table.main_table.nowPage = index;
        kk.k_load_table(this,'payfrep_table','custom');
      },
      copyObj(obj1, obj2) {
        for (var key in obj1) {
          // 原型对象不拷贝
          if (key === '__proto__') {
            continue
          }
          // 不存在的属性不拷贝
          if (!obj2.hasOwnProperty(key)) {
            continue
          }
          // 自动将number转换成string
          if (typeof obj1[key] === 'number') {
            obj1[key] = '' + obj1[key]
          }
          obj2[key] = obj1[key]
        }
      },
    }
  }
</script>

<style scoped>
</style>
